<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>邦拓租车管理端绑定号码</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<style>
    .sun-container{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
    }
    .card-img-top{
        width: 250px;
    }
    .sun-header{
        width: 100%;
        margin-top:10px;
    }
</style>
<body>
<view class="d-flex flex-column justify-content-center align-items-center">

    <div class="card" style="width: 18rem;">
        <div class=" sun-header d-flex flex-column justify-content-center align-items-center">
            <img src="{{$user->avatar}}" class="card-img-top" alt="...">
        </div>

        @if ($user->phone)
            <div class="card-body">
                <h5 class="card-title">{{$user->nick_name}}</h5>
                <div class="alert alert-success" role="alert">
                    恭喜，手机号:{{$user->phone}}已经绑定成功!
                </div>
            </div>
        @else
            <div class="card-body">
                <h5 class="card-title">{{$user->nick_name}}</h5>
                <h5 class="card-title">openid:{{$user->wechat_openid}}</h5>
                <div class="mb-3">
                    <label for="exampleFormControlInput1" class="form-label">绑定手机号</label>
                    <input  class="form-control" id="exampleFormControlInput1" placeholder="请填写手机号">
                </div>
                <button type="button" class="btn btn-success" id="submit">提交</button>
            </div>
        @endif
    </div>
</view>

<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
<script>
   var button  =  document.getElementById('submit')
   button.onclick = function(){
        var inputVal = document.getElementById('exampleFormControlInput1').value
       console.log('获取到的数据',inputVal)
       axios({
           method: 'post',
           url: 'https://new.dev.czmb.tech/api/main/bindUser',
           data: {
               phone: inputVal,
               openid: '{{$user->wechat_openid}}'
           }
       })
       .then(function (response) {
           console.log(response);
           if(response.data.code == 201){
               alert(response.data.data)
           }
           if(response.data.code == 200){
               alert('绑定成功')
           }

       })
       .catch(function (error) {
           console.log(error);
       });
   }
</script>
</body>
</html>
